<template>
    <div class="top">
        <div class="left">
            <span>订单提交成功，请尽快付款！订单号:</span>
            <b style="color:red;">{{ detail?.order_id }}</b>
        </div>
        <div class="total_fee">
            应付金额
            <b style="color:red;font-size:20px">
                {{ detail?.total_fee }}
            </b>
            元
        </div>
    </div>
    <div class="payment">
        <div class="title">
            <el-icon>
                <Finished />
            </el-icon>
            <b>
                微信支付
            </b>
            <span>请使用微信扫码支付</span>
        </div>
        <div class="main">
            <div class="left">
                <div class="qrcode">
                    <!-- 展示二维码的地方 -->
                    <img :src="imgUrl" width="300" height="300" alt="">
                    <div class="pw-box-ft">
                        <div class="svg">
                            <svg class="icon">
                                <use xlink:href="#icon-weixin1"></use>
                            </svg>
                        </div>
                        <div class="qr-right">
                            <p>请使用微信扫一扫</p>
                            <p>扫描二维码支付</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">

            </div>
        </div>
    </div>
    <el-descriptions title="订单信息">
        <el-descriptions-item label="创建时间">{{ detail?.create_time
        }}</el-descriptions-item>
        <el-descriptions-item label="用户名">
            {{ detail?.user_nickname }}
        </el-descriptions-item>
        <el-descriptions-item label="手机号">
            {{ detail?.user_phone }}
        </el-descriptions-item>
        <el-descriptions-item label="产品名称">
            {{ detail?.orderDetail[0].productName }}
        </el-descriptions-item>
        <el-descriptions-item label="产品描述">
            {{ detail?.orderDetail[0].description }}
        </el-descriptions-item>
        <el-descriptions-item label="收件地址">
            {{ detail?.address }}
        </el-descriptions-item>
    </el-descriptions>

</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { useRoute, useRouter } from "vue-router"
import *as api from "../../../api/vip.js"

import qr from "qrcode"


let route = useRoute()

let router = useRouter()

console.log(route.query.id);

let imgUrl = ref()

let tableData = ref()

let timeout = ref(null)

let detail = ref()

let datalist = async () => {
    try {
        let res = await api.getOrder(route.query.id)
        let { order_status } = res.data.data;
        detail.value = res.data.data;
        console.log(detail.value)

    } catch (error) {

    }
}


let getList = async () => {
    if (localStorage.getItem(`ee`)) {
        qr.toDataURL(localStorage.getItem("ee"), (err, url) => {
            imgUrl.value = url
        })

    } else {
        try {
            let res = await api.payment(route.query.id)
            console.log(res, ";;;;;;");

            tableData.value = res.data
            localStorage.setItem("ee", res.data.code_url)
            console.log(qr.toDataURL(res.data.code_url));
            qr.toDataURL(res.data.code_url, (err, url) => {
                imgUrl.value = url
            })

        } catch (error) {
            console.log(error);
        }
    }

}
let poling = () => {
    let interval = setInterval(async () => {
        try {
            let res = await api.qqueryResults(route.query.id);
            //支付成功,跳转页面到支付成功的页面,清掉本地的缓存的支付地址
            router.push('/statice/paySuccess')
            localStorage.removeItem(order_id)
        } catch (e) {
            if (e.toString() === '交易关闭' || e.toString() === '数据不存在') {
                ElMessage.error(e.toString())
                timeout = setTimeout(() => {
                    router.push("/")
                }, 2000)
            }
        }

    }, 2000);
    return interval
}

let interval = poling();

onUnmounted(() => {
    if (timeout) {
        clearTimeout(timeout)
    }
    clearInterval(interval)
})



onMounted(() => {
    getList()
    datalist()
})



</script>
<style scoped lang="less">
.payment {
    background-color: #fff;
    padding: 5px 30px;
    box-shadow: 0 6px 32px rgb(0 0 0 / 13%);
}

.main {
    display: flex;
    justify-content: center;
}

.top {
    padding: 5px 5px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;

    .total_fee {
        margin-top: 10px;
    }
}

.title {
    margin: 10px 20px;

    b {
        font-size: 30px;
        display: inline-block;
        margin-right: 135px;
    }

    :deep(.icon) {
        vertical-align: text-bottom;
        width: 2em;
        height: 2em;
        margin-right: 10px;
    }
}

.pw-box-ft {
    height: 44px;
    padding: 8px 0 8px;
    background-image: linear-gradient(135deg, #4c67ff, #5635df);
    display: flex;

    justify-content: space-evenly;

    .qr-right {
        p {
            margin: 0;
            font-size: 14px;
            line-height: 22px;
            color: #fff;
            font-weight: 700;
        }
    }

    .icon {

        width: 3em;
        height: 3em;
    }
}




.right {
    width: 379px;
    height: 421px;
    padding-left: 50px;
    margin-top: -20px;
    background: url(../../../../assets/phone.png) 50px 0 no-repeat;
}
</style>
